<template>
    <!--<button @click="showForm">显示form</button>-->
    <div class="wrapper">
        <!--优先产品-->
        <div>
            <!--标题-->
            <div class="title">
                <div class="title_block"></div>
                <div class="title_text">
                    优先产品
                </div>
            </div>
        </div>

        <div class="product_one">
            <Row gutter="50" style="margin: 0 auto">
                <Col span="11" class="firstProduct" style="padding:0;" :style="{marginRight:index%2?'':'8.2%'}"
                     @click="showForm(item.key)"
                     v-for="(item,index) in productGoodList" :key="item.key">
                    <span class="Product_name" style="float: left; line-height: 63px">
                          {{item.name}}
                        </span>
                    <div style=" float: right;margin-top: 12%;margin-right: 8%;">
                        <img :src="item.icon"/>
                    </div>
                </Col>
            </Row>
        </div>
        <!--优先产品-->
        <!--全部产品-->
        <div class="allProduct_title">
            <!--标题-->
            <div class="title">
                <div class="title_block"></div>
                <div class="title_text">
                    全部产品
                </div>
            </div>
            <div>
                <Row style="margin: 0 auto">

                    <Col span="11" class="allProduct" style="padding:0;" :style="{marginRight:index%2?'':'8.2%'}"
                         @click="showForm(item.key)"
                         v-for="(item,index) in productList" :key="item.key">
                        <span class="Product_name" style="float: left;">
                          {{item.name}}
                        </span>
                        <div style=" float: right;margin-top: 9%;margin-right: 8%;">
                            <img :src="item.icon"/>
                        </div>
                    </Col>

                </Row>
            </div>
        </div>
        <!--全部产品-->


    </div>


</template>

<script>
    import {Col, Row} from 'vant';
    import hearticon from '@assets/image/heart.svg'
    import brainicon from '@assets/image/brain.svg'
    import bloddicon from '@assets/image/blood.svg'
    import hypertensiveicon from '@assets/image/hypertensive.svg'
    import kidneyicon from '@assets/image/kidney.svg'
    import pancreasicon from '@assets/image/pancreas.svg'

    const allProduct = [
        {
            name: '波立维 ACS',
            key: 'PLAVIX_ACS',
            icon: hearticon
        },
        {
            name: '波立维 卒中',
            key: 'PLAVIX_STROKE',
            icon: brainicon
        }, {
            name: '安博维',
            key: 'APROVE',
            icon: hypertensiveicon
        },
        {
            name: '安博诺',
            key: 'APROVE_CO',
            icon: hypertensiveicon,
        },
        {
            name: '来得时',
            key: 'LANTUS',
            icon: pancreasicon
        },
        {
            name: '亚莫利',
            key: 'AMARYL',
            icon: pancreasicon
        },
        {
            name: '尼欣那',
            key: 'NESINA',
            icon: pancreasicon
        },
        {
            name: '诺维乐',
            key: 'RENVEL',
            icon: kidneyicon
        },
        {
            name: '艾倍得',
            key: 'APDINJ',
            icon: pancreasicon
        },
        {
            name: '克赛 ACS',
            key: 'CLEXAN_ACS',
            icon: bloddicon
        },
        {
            name: '克赛 VTE',
            key: 'CLEXAN_VTE',
            icon: bloddicon
        },
        {
            name: '克赛 血液透析',
            key: 'CLEXAN_HD',
            icon: bloddicon
        },
        {
            name: '利时敏',
            key: 'LYXUMI',
            icon: hypertensiveicon,
        }
    ]

    export default {
        name: "brands",
        props: {
            product: Array
        },
        components: {
            Col,
            Row
        },
        data() {
            return {
                hearticon: hearticon,
                productGoodList: [
                    {
                        name: '波立维 ACS',
                        key: 'PLAVIX_ACS',
                        icon: hearticon
                    },
                    {
                        name: '波立维 卒中',
                        key: 'PLAVIX_STROKE',
                        icon: brainicon
                    },
                ],
                productList: [
                    {
                        name: '安博维',
                        key: 'APROVE',
                        icon: hypertensiveicon
                    },
                    {
                        name: '安博诺',
                        key: 'APROVE_CO',
                        icon: hypertensiveicon,
                    },
                    {
                        name: '来得时',
                        key: 'LANTUS',
                        icon: pancreasicon
                    },
                    {
                        name: '亚莫利',
                        key: 'AMARYL',
                        icon: pancreasicon
                    },
                    {
                        name: '尼欣那',
                        key: 'NESINA',
                        icon: pancreasicon
                    },
                    {
                        name: '诺维乐',
                        key: 'RENVEL',
                        icon: kidneyicon
                    },
                    {
                        name: '艾倍得',
                        key: 'APDINJ',
                        icon: pancreasicon
                    },
                    {
                        name: '克赛 ACS',
                        key: 'CLEXAN_ACS',
                        icon: bloddicon
                    },
                    {
                        name: '克赛 VTE',
                        key: 'CLEXAN_VTE',
                        icon: bloddicon
                    },
                    {
                        name: '克赛 血液透析',
                        key: 'CLEXAN_HD',
                        icon: bloddicon
                    },
                    {
                        name: '利时敏',
                        key: 'LYXUMI',
                        icon: hypertensiveicon,
                    }
                ]
            }
        },
        methods: {
            showForm(key) {
                this.$emit('communicate', key)
            }
        },
        mounted() {
            let recommandArr = this.product.filter(item => {
                return item.productId == 'LANTUS' || item.productId == 'CLEXAN_VTE' || item.productId == 'CLEXAN_HD' || item.productId == 'CLEXAN_ACS' || item.productId == 'LYXUMI' || item.productId == 'APDINJ'
            }).map(item => {
                if (item.productId == 'LANTUS') {
                    return {name: item.productName, key: item.productId, icon: pancreasicon}
                }
                if (item.productId == 'CLEXAN_VTE') {
                    return {name: item.productName, key: item.productId, icon: bloddicon}
                }
                if (item.productId == 'CLEXAN_HD') {
                    return {name: item.productName, key: item.productId, icon: bloddicon}
                }
                if (item.productId == 'CLEXAN_ACS') {
                    return {name: item.productName, key: item.productId, icon: bloddicon}
                }
                if(item.productId == 'LYXUMI'){
                    return {name: item.productName, key: item.productId, icon: bloddicon}
                }
                if(item.productId == 'APDINJ'){
                    return {name: item.productName, key: item.productId, icon: bloddicon}
                }
            })
            let productList = []
            this.product.forEach(p => {
                let f_arr = allProduct.filter(item => p.productId == item.key)
                if (f_arr.length > 0) {
                    productList.push({name: p.productName, key: p.productId, icon: f_arr[0].icon})
                }
            })
            this.productGoodList = recommandArr
            this.productList = productList
        },
    }
</script>

<style scoped>
    .wrapper {
        padding-top: 3%;
        padding-left: 5.3%;
        padding-right: 5.3%;
    }

    .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-top: 5%;
    }

    .title_block {
        background: #ACB318;
        width: 4px;
        height: 20px;
    }

    .title_text {
        font-family: PingFangSC-Semibold;
        font-size: 16px;
        color: #333333;
        letter-spacing: 0.3px;
        text-align: justify;
        line-height: 24px;
        margin-left: 12px;
    }

    .product_one {
        width: 100%;
        margin-top: 4%;
    }

    .firstProduct {
        height: 64px;
        background: #454592;
        border-radius: 2px;
        border-radius: 2px;
        margin-bottom: 3%;
    }

    .Product_name {
        font-family: PingFangSC-Regular;
        font-size: 15px;
        color: #FFFFFF;
        letter-spacing: 0.3px;
        line-height: 16px;
        padding-left: 10%;
        line-height: 48px;
    }

    .allProduct_title {
        width: 100%;
        margin-top: 3%;
    }

    .allProduct {
        height: 48px;
        background: #ACB318;
        border-radius: 2px;
        border-radius: 2px;
        margin-top: 5%;
    }
</style>